<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <title>系统登录</title>
        <!-- 下载并引入jquery easyUI -->
        <link rel="stylesheet" type="text/css"
              href="./js/jquery-easyui-1.9.5/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css"
              href="./js/jquery-easyui-1.9.5/themes/icon.css">
        <link rel="stylesheet" type="text/css"
              href="./js/jquery-easyui-1.9.5/themes/color.css">
        <script type="text/javascript"
                src="./js/jquery-easyui-1.9.5/jquery.min.js"></script>
        <script type="text/javascript"
                src="./js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>

        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                background: #fff url("./images/subtle_grunge.png") 0 0;
                color: #46b8da;
            }
            h1 {
                color: rgb(128, 128, 128);
                text-align: center;
            }
            a:link, a:hover, a:visited, a:active {
                color: rgb(128, 128, 128);
                text-decoration: none;
            }
            form {
                width: 400px;
                min-width: 400px;
                position: absolute;
                left: 40%;
                top: 15%;
                margin: 0;
                padding: 30px;
                background-color: white;
                border: 2px solid rgba(128, 128, 128, 0.2);
                border-radius: 10px;
            }
            form div {
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //登录页面跳出管理后台框架
            if (window.location.href.indexOf("login.jsp")===-1) {
                window.location.href = "./login.jsp";
            }
        </script>

        <form id="users_fm" method="post">
            <div>
                <h1>系统登录</h1>
            </div>
            <div>
                <label style="display: block;width: 100%; height: 35px;">
                    <input name="name" class="easyui-textbox"
                           data-options="iconCls:'icon-man',iconWidth:30,iconAlign:'left',prompt:'userName'"
                           style="width: 100%; height: 35px;"/>
                </label>
            </div>
            <div>
                <label style="display: block;width: 100%; height: 35px;">
                    <input name="password" class="easyui-passwordbox"
                           data-options="iconWidth:30,iconAlign:'left',prompt:'password'"
                           style="width: 100%; height: 35px;"/>
                </label>
            </div>
            <div>
                <label style="display: block;width: 100%; height: 35px;">
                    <input name="validate" class="easyui-textbox"
                           data-options="iconCls:'icon-lock',iconWidth:30,iconAlign:'left',prompt:'validate'"
                           style="width: 100%; height: 35px;"/>
                </label>
                <img
                        id="validateImage" style="cursor: pointer; margin: 3px;"
                        src="validateCode.jsp" alt="验证码"
                        height="32px" width="80px" onclick="resetCode()">
            </div>
            <div style="text-align: center;">
                <a href="#" id="loginBtn" style="width: 40%; height: 35px;"
                   class="easyui-linkbutton" iconCls="icon-ok" onclick="login()">登陆</a>
                <a href="#" style="width: 40%; height: 35px; margin-left: 30px;"
                   class="easyui-linkbutton" iconCls="icon-cancel"
                   onclick="clearForm()">重置</a>
            </div>
            <div>
                <div style="display: inline;">
                    <a href="javascript:void(0)">还未注册？</a>
                </div>
                <div style="display: inline; margin-left: 170px;">
                    <a href="javascript:void(0)">忘记密码？</a>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            function resetCode() {
                $("#validateImage").attr('src',"./validateCode.jsp?r="
                    + new Date().getTime());
            }
            function clearForm() {
                $('#users_fm').form('reset');
            }
            $(document).keydown(function (event) {
                if (event.keyCode === 13 || event.keyCode === 108) {
                    login();
                    console.log(1);
                }
            })
            function login() {
                //使用ajax进行提交，
                $('#users_fm')
                    .form(
                        'submit',
                        {
                            url : './login',
                            onSubmit : function() {
                                return $(this).form('validate');
                            },
                            success : function(result) {
                                const {errorMsg, success} = eval('(' + result + ')');
                                if (!success) {
                                    $.messager.show({
                                        title : 'Error',
                                        timeout : 2000,
                                        msg : errorMsg
                                    });
                                    $('#users_fm').form('reset');
                                    resetCode();
                                } else {
                                    $.messager.show({
                                        title : 'Info',
                                        timeout : 2000,
                                        msg : errorMsg
                                    });
                                    window.location.href = "./pages/index.jsp";
                                }
                            }
                        });
            }
        </script>
    </body>
</html>
